<template>
  <div class="space-y-6">
    <!-- 错误状态提示 -->
    <div v-if="showErrorState" class="glass-card rounded-2xl p-6 bg-red-500/20 border border-red-500/30">
      <div class="flex items-center gap-3 text-red-200">
        <AlertCircle class="w-6 h-6" />
        <div>
          <div class="font-medium">网络连接异常</div>
          <div class="text-sm text-red-300 mt-1">请检查网络连接后重试</div>
        </div>
      </div>
    </div>

    <!-- 当前测试结果 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="glass-card rounded-2xl p-6 text-center">
        <div class="flex items-center justify-center mb-3">
          <Download :class="downloadIconClass" />
        </div>
        <div class="text-3xl font-bold text-white mb-1 tabular-nums">
          {{ formatSpeed(downloadSpeed) }}
        </div>
        <div class="text-sm text-white/60 mb-2">Mbps 下载</div>
        <div v-if="downloadSpeed > 0" :class="getSpeedQuality(downloadSpeed, 'download').colorClass">
          {{ getSpeedQuality(downloadSpeed, 'download').label }}
        </div>
        <div v-else-if="isTestingDownload" class="text-blue-400 text-xs font-medium">
          测试中...
        </div>
      </div>

      <div class="glass-card rounded-2xl p-6 text-center">
        <div class="flex items-center justify-center mb-3">
          <Upload :class="uploadIconClass" />
        </div>
        <div class="text-3xl font-bold text-white mb-1 tabular-nums">
          {{ formatSpeed(uploadSpeed) }}
        </div>
        <div class="text-sm text-white/60 mb-2">Mbps 上传</div>
        <div v-if="uploadSpeed > 0" :class="getSpeedQuality(uploadSpeed, 'upload').colorClass">
          {{ getSpeedQuality(uploadSpeed, 'upload').label }}
        </div>
        <div v-else-if="isTestingUpload" class="text-purple-400 text-xs font-medium">
          测试中...
        </div>
      </div>

      <div class="glass-card rounded-2xl p-6 text-center">
        <div class="flex items-center justify-center mb-3">
          <Zap :class="pingIconClass" />
        </div>
        <div class="text-3xl font-bold text-white mb-1 tabular-nums">
          {{ ping.toFixed(0) }}
        </div>
        <div class="text-sm text-white/60 mb-2">ms 延迟</div>
        <div v-if="ping > 0" :class="getPingQuality(ping).colorClass">
          {{ getPingQuality(ping).label }}
        </div>
        <div v-else-if="isTestingPing" class="text-yellow-400 text-xs font-medium">
          测试中...
        </div>
      </div>

      <div class="glass-card rounded-2xl p-6 text-center">
        <div class="flex items-center justify-center mb-3">
          <Activity :class="activityIconClass" />
        </div>
        <div class="text-3xl font-bold text-white mb-1 tabular-nums">
          {{ jitter.toFixed(1) }}
        </div>
        <div class="text-sm text-white/60 mb-2">ms 抖动</div>
        <div v-if="jitter > 0" :class="getJitterQuality(jitter).colorClass">
          {{ getJitterQuality(jitter).label }}
        </div>
        <div v-else-if="isTestingPing" class="text-blue-400 text-xs font-medium">
          测试中...
        </div>
      </div>
    </div>

    <!-- 测试历史 -->
    <div v-if="results.length > 0" class="glass-card rounded-2xl p-6">
      <div class="flex items-center gap-3 mb-6">
        <Clock class="w-5 h-5 text-white/80" />
        <h3 class="text-xl font-semibold text-white">测试历史</h3>
        <span class="text-sm text-white/60">(最近10次)</span>
      </div>

      <div class="space-y-3 max-h-80 overflow-y-auto">
        <div
            v-for="(result, index) in results.slice(0, 10)"
            :key="result.timestamp"
            class="flex justify-between items-center py-4 px-5 bg-white/5 rounded-xl border border-white/10 hover:bg-white/10 transition-colors"
        >
          <div class="flex items-center gap-4 text-sm text-white/80">
            <span class="font-medium">{{ formatTime(result.timestamp) }}</span>
            <span class="text-xs text-white/60">{{ formatDate(result.timestamp) }}</span>
          </div>
          <div class="flex items-center gap-6 text-sm font-medium">
            <span class="text-green-400 flex items-center gap-1">
              <Download class="w-4 h-4" />
              {{ formatSpeed(result.download) }}
            </span>
            <span class="text-purple-400 flex items-center gap-1">
              <Upload class="w-4 h-4" />
              {{ formatSpeed(result.upload) }}
            </span>
            <span class="text-yellow-400 flex items-center gap-1">
              <Zap class="w-4 h-4" />
              {{ result.ping.toFixed(0) }}ms
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 无历史数据提示 -->
    <div v-else class="glass-card rounded-2xl p-6 text-center">
      <div class="flex flex-col items-center justify-center py-8 text-white/60">
        <Clock class="w-12 h-12 mb-4 opacity-50" />
        <p class="text-lg font-medium">暂无测试历史</p>
        <p class="text-sm mt-1">完成一次测速后，结果将显示在这里</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Download, Upload, Zap, Clock, Activity, AlertCircle } from 'lucide-vue-next'
import type { TestResult } from '../types/speedTest'

interface Props {
  downloadSpeed: number
  uploadSpeed: number
  ping: number
  jitter: number
  isTestingDownload: boolean
  isTestingUpload: boolean
  isTestingPing: boolean
  results: TestResult[]
  errorMessage?: string
}

const props = defineProps<Props>()

const showErrorState = computed(() => {
  return props.errorMessage && props.errorMessage.length > 0
})

const downloadIconClass = computed(() =>
    `w-6 h-6 ${props.isTestingDownload ? 'text-blue-400 animate-pulse' : 'text-white/80'}`
)

const uploadIconClass = computed(() =>
    `w-6 h-6 ${props.isTestingUpload ? 'text-purple-400 animate-pulse' : 'text-white/80'}`
)

const pingIconClass = computed(() =>
    `w-6 h-6 ${props.isTestingPing ? 'text-yellow-400 animate-pulse' : 'text-white/80'}`
)

const activityIconClass = computed(() =>
    `w-6 h-6 ${props.isTestingPing ? 'text-blue-400 animate-pulse' : 'text-white/80'}`
)

const formatSpeed = (speed: number): string => {
  // 根据速度大小自动调整显示格式
  if (speed >= 1000) {
    // 对于非常高的速度，使用一位小数
    return speed.toFixed(1)
  } else if (speed >= 100) {
    // 对于高速度，使用一位小数
    return speed.toFixed(1)
  } else if (speed >= 10) {
    // 对于中等速度，使用一位小数
    return speed.toFixed(1)
  } else {
    // 对于低速度，使用两位小数以提高精度
    return speed.toFixed(2)
  }
}

const getSpeedQuality = (speed: number, type: 'download' | 'upload') => {
  // 调整速度质量评价标准，适应更高的带宽
  if (speed >= 1000) return { label: '超高速', colorClass: 'text-cyan-400 text-xs font-medium' }
  if (speed >= 500) return { label: '极高速', colorClass: 'text-blue-400 text-xs font-medium' }
  if (speed >= 100) return { label: '极速', colorClass: 'text-green-400 text-xs font-medium' }
  if (speed >= 50) return { label: '优秀', colorClass: 'text-green-400 text-xs font-medium' }
  if (speed >= 25) return { label: '良好', colorClass: 'text-yellow-400 text-xs font-medium' }
  if (speed >= 10) return { label: '一般', colorClass: 'text-orange-400 text-xs font-medium' }
  return { label: '较慢', colorClass: 'text-red-400 text-xs font-medium' }
}

const getPingQuality = (ping: number) => {
  if (ping <= 20) return { label: '极佳', colorClass: 'text-green-400 text-xs font-medium' }
  if (ping <= 50) return { label: '良好', colorClass: 'text-yellow-400 text-xs font-medium' }
  if (ping <= 100) return { label: '一般', colorClass: 'text-orange-400 text-xs font-medium' }
  return { label: '较高', colorClass: 'text-red-400 text-xs font-medium' }
}

const getJitterQuality = (jitter: number) => {
  if (jitter <= 5) return { label: '稳定', colorClass: 'text-green-400 text-xs font-medium' }
  if (jitter <= 15) return { label: '良好', colorClass: 'text-yellow-400 text-xs font-medium' }
  if (jitter <= 30) return { label: '一般', colorClass: 'text-orange-400 text-xs font-medium' }
  return { label: '不稳定', colorClass: 'text-red-400 text-xs font-medium' }
}

const formatTime = (timestamp: number) => {
  return new Date(timestamp).toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

const formatDate = (timestamp: number) => {
  return new Date(timestamp).toLocaleDateString('zh-CN', {
    month: 'short',
    day: 'numeric'
  })
}
</script>

<style scoped>
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}
</style>